<template>
  <div class="userManagement">
    
    <el-row :gutter="10">
      <!--部门数据-->
      <!-- <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>-->
      <el-col :span="24" :xs="24">
        <div class="container">
          <div class="handle-box search-box">
            <el-button
              v-if="adminId ==1"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              class="handle-del mr10"
              @click="delAllSelection"
            >批量删除</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
              class="mr10"
            >新增</el-button>
            <el-input
              size="small"
              v-model="query.trueName "
              placeholder="按用户姓名查询"
              class="handle-input mr10"
              clearable
            ></el-input>
            <el-input
              size="small"
              v-model="query.mobile "
              placeholder="按电话号查询"
              class="handle-input mr10"
              clearable
            ></el-input>
            <treeselect
                size='mini'
              :options="deptOptions"
              :disable-branch-nodes="true"
              :show-count="true"
              placeholder="选择部门"
              style="width:200px;line-height:30px;display:inline-block;margin-right:20px;font-size:13px"
            />
            <el-button size="mini" type="warning" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </div>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="trueName" label="用户姓名" width="100" align="center"></el-table-column>
            <el-table-column label="手机坐席开通状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.state==1" style="color:green;">已开通</span>
                <span v-if="scope.row.state==0" style="color:green;">未开通</span>
              </template>
            </el-table-column>
            <el-table-column label="是否验证" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.vail==1" style="color:green;">已验证</span>
                <span v-if="scope.row.vail==0" style="color:green;">未验证</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" min-width="150" label="手机号" align="center"></el-table-column>
            <el-table-column prop="customCount" min-width="100" label="客户数量" align="center"></el-table-column>
            <!-- <el-table-column prop="unDealContractCount" min-width="130" label="未结束合同数"  align="center"></el-table-column>
                <el-table-column prop="unDealContractMount" min-width="160" label="未结束合同总金额(元)"  align="center"></el-table-column>
            <el-table-column prop="unPayContractMount" min-width="150" label="未付款金额(元)"  align="center"></el-table-column>-->
            <!-- <el-table-column  min-width="150" label="本月通话时长统计"  align="center">
                    <template slot-scope="scope">
                        <span class="blue" style="text-decoration:underline;margin-left:5px" @click="monthTimer(scope.$index, scope.row)">{{scope.row.monthBillsec}}</span> 
                    </template>
            </el-table-column>-->
            <el-table-column min-width="160" label="今日有效通话时长(分钟)" align="center">
              <template slot-scope="scope">{{scope.row.todayBillsec}}</template>
            </el-table-column>
            <el-table-column min-width="150" label="本月有效通话时长(分钟)" align="center">
              <template slot-scope="scope">
                <span
                  class="blue"
                  style="text-decoration:underline;margin-left:5px"
                  @click="monthTimer(scope.$index, scope.row)"
                >{{scope.row.monthBillsec}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="370" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  type="warning"
                  icon="el-icon-setting"
                  size="mini"
                  @click="resetPassword(scope.$index, scope.row)"
                >重置密码</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-bell"
                  @click="handleListen(scope.$index, scope.row)"
                >手机监听</el-button>
                <!-- <el-button
                             size="mini"
                            type="primary"
                            icon="el-icon-bell"
                            @click="handleListen2(scope.$index, scope.row)"
                >手机监听</el-button>-->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :current-page="query.page"
              :page-size="query.pageSize"
              :total="pageTotal"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <EditDialog
      :dialogVisible.sync="dialogVisible"
      :dialogStatus.sync="dialogStatus"
      :formData.sync="formData"
      @closeDialog="closeDialog"
      @updateData="getData"
    ></EditDialog>
    <!-- 监听人员弹窗 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialog6" width="1200px" fullscreen>
      <el-button type="primary" size="small" icon="el-icon-back" @click="quxiao666">返回</el-button>
      <div style="margin:20px 0;font-weight:550;font-size:16px;margin-left:6px;">业务员：{{name}}</div>
      <div style="margin-bottom:10px;dispaly:flex;align-items: center;">
        <el-radio-group v-model="radio1" @change="radio" style="margin-right:20px">
          <el-radio-button label="手机坐席"></el-radio-button>
          <!-- <el-radio-button label="网络坐席"></el-radio-button> -->
        </el-radio-group>
        <el-select v-model="value888" clearable placeholder="请选择">
          <el-option
            v-for="item in options888"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left:10px"
          type="warning"
          icon="el-icon-search"
          @click="searchTime"
        >搜索</el-button>
      </div>
      <el-table
        :data="listenlists"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column label="联系公司" prop="customerName" align="center"></el-table-column>
        <el-table-column prop="billsec" label="通话时长(秒)" align="center" width="100"></el-table-column>
        <el-table-column label="业务号码" prop="bindNum" align="center"></el-table-column>
        <el-table-column prop="calleeNum" label="主叫号码" align="center"></el-table-column>
        <el-table-column prop="fwdDstNum" label="被叫号码" align="center"></el-table-column>
        <el-table-column label="通话开始时间" align="center">
          <!-- <template slot-scope="scope">{{ scope.row.callOutStartTime | formatDate}}</template> -->
          <template slot-scope="scope">{{ scope.row.callOutStartTime | formatDate}}</template>
        </el-table-column>
        <el-table-column label="通话结束时间" align="center">
          <!-- <template slot-scope="scope">{{ scope.row.callEndTime | formatDate}}</template> -->
          <template slot-scope="scope">{{ scope.row.callEndTime | formatDate}}</template>
        </el-table-column>
        <el-table-column label="录音" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.billsec>0" style="color:blue;cursor:pointer;">
              <el-button
                @click="muiscPlay1(scope.$index, scope.row)"
                type="primary"
                icon="el-icon-headset"
              >录音</el-button>
            </span>
            <span v-if="scope.row.billsec==0" style="color:red">未接通</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作" align="center" fixed="right" width="200px" >
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-circle-check"
                            @click="listen(scope.$index, scope.row)"
                        >录音</el-button>  
                    </template>
        </el-table-column>-->
      </el-table>
      <div class="block page">
        <el-pagination
          @current-change="handleCurrentChange22"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="todelpage"
        ></el-pagination>
      </div>
    </el-dialog>
    <!-- 录音播放 -->
    <el-dialog :close-on-click-modal="true" :visible.sync="dialog7" width="360px">
      <audio v-if="dialog7" controls class="audio" autoplay="autoplay">
        <source :src="audio" class="audio" />您的浏览器不支持 audio 元素。
      </audio>
    </el-dialog>
    <!-- 月度统计弹窗 -->
    <el-dialog title="通话记录柱状图" :close-on-click-modal="false" :visible.sync="dialog8" width="1000px">
      <div class="schart-box">
        <div class="block">
          <span class="demonstration" style="margin-right:10px">选择查看月份</span>
          <el-date-picker
            v-model="value00"
            type="month"
            value-format="M"
            format="M月"
            @change="timeMonth"
            placeholder="选择月份"
          ></el-date-picker>
        </div>
        <schart class="schart" canvasId="bar" :options="options89"></schart>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
import EditDialog from "./EditDialog.vue";
import Schart from "vue-schart";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { timeMonth,searchTime,resetPassword,handleEdit,getData,deleteData } from "@/api/systemSettings/userManagement";

export default {
  components: { EditDialog, Schart, Treeselect },

  data() {
    return {
      deptOptions: [
        {
          id: 100,
          label: "公司名称",
          children: [
            { id: 101, label: "部门名称1" },
            { id: 101, label: "部门名称2" },
            { id: 101, label: "部门名称3" },
          ],
        },
      ],
      deptName: "",
      value00: "",
      month: 0,
      options89: {
        type: "bar",
        title: {
          text: "本月通话统计(分钟)",
        },
        bgColor: "#fbfbfb",
        labels: [],
        datasets: [
          {
            label: "通话时间(分钟)",
            fillColor: "#33abf3",
            data: [],
          },
        ],
      },
      dialog8: false,
      data8: [],
      options888: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "接通",
        },
        {
          value: "60",
          label: "大于1分钟",
        },
        {
          value: "120",
          label: "大于2分钟",
        },
      ],
      value888: "",
      row: {},
      dialog7: false,
      audio: "",
      name: "",
      // 监听的参数
      radio1: "手机坐席",
      userId: 0,
      pageSize: 5,
      page: 1,
      todelpage: 0,
      listenlists: [],
      dialog6: false,
      loading: true,
      // 参数
      query: {
        page: 1,
        pageSize: 10,
        trueName: "",
        mobile: "",
      },
      pageTotal: 0,
      tableData: [],
      tHeight: document.body.offsetHeight - 350,
      //删除
      multipleSelection: [],
      delList: [],
      dialogVisible: false, // 是否展示编辑页面
      // 数据
      formData: {
        mobile: "",
        roleId: "",
        sex: "",
        userName: "",
        email: "",
        id: "",
        realName: "",
      },
      dialogStatus: 0,
      adminId: JSON.parse(localStorage.getItem("adminData")).id,
    };
  },
  computed: {},
  filters: {
    formatDate: function (value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  created() {
    this.getData();
    let ss = localStorage.getItem("adminData");
  },
  mounted() {
    //   this.initWorkBench()
  },
  watch: {},
  methods: {
    quxiao666() {
      this.dialog6 = false;
    },
    timeMonth(e) {
      console.log(e);
      this.month = e;
      if (this.month == null) {
        let date = new Date();
        console.log(date.getMonth() + 1, "当前月份");
        this.month = date.getMonth() + 1;
      }
      timeMonth({
          userId: this.row888.userId,
          month: this.month,
        })
        .then((res) => {
          console.log(res);
          this.data8 = res.data;
          let arr1 = [];
          let arr2 = [];
          for (let i = 0; i < this.data8.length; i++) {
            //   arr1.push(this.data8[i].time.slice(8,10));
            arr1.push(this.data8[i].time.slice(3, 5));
            arr2.push(this.data8[i].callTime);
          }
          this.options89.labels = arr1;
          this.options89.datasets[0].data = arr2;
          this.options89.title.text =
            "当月通话" + "" + eval(arr2.join("+")) + "" + "分钟";
        });
    },
    searchTime() {
      this.page = 1;
      console.log(this.value888);
      searchTime({
          pageSize: 15,
          page: this.page,
          mobile: this.row.phone,
          callTime: this.value888,
        })
        .then((res) => {
          console.log(res);
          this.listenlists = res.data.results;
          this.todelpage = res.data.count;
        });
    },
    monthTimer(index, row) {
      console.log(row);
      this.row888 = row;
      let date = new Date();
      console.log(date.getMonth() + 1, "当前月份");
      this.month = date.getMonth() + 1;
      this.value00 = "" + this.month + "" + "月";
      timeMonth({
          userId: this.row888.userId,
          month: this.month,
        })
        .then((res) => {
          console.log(res);
          this.data8 = res.data;
          let arr1 = [];
          let arr2 = [];
          for (let i = 0; i < this.data8.length; i++) {
            //   arr1.push(this.data8[i].time.slice(8,10));
            arr1.push(this.data8[i].time.slice(3, 5));
            arr2.push(this.data8[i].callTime);
          }
          this.options89.title.text =
            "当月通话" + "" + eval(arr2.join("+")) + "" + "分钟";
          this.options89.labels = arr1;
          this.options89.datasets[0].data = arr2;
        });
      this.dialog8 = true;
      console.log("获取月通话记录");
    },
    muiscPlay1(index, row) {
      console.log(row);
      this.dialog7 = true;
      this.audio = row.recordFileDownloadUrl;
      console.log(this.audio, "---------------录音链接----------------");
      //   this.$refs.audio1.src = row.recordFileDownloadUrl
    },
    radio(e) {
      console.log(e);
    },
    //   监听分页
    handleCurrentChange22(e) {
      console.log(e);
      this.page = e;
      searchTime({
          pageSize: 15,
          page: this.page,
          mobile: this.row.phone,
          callTime: this.value888,
        })
        .then((res) => {
          console.log(res);
          this.listenlists = res.data.results;
          this.todelpage = res.data.count;
        });
    },
    listen(index, row) {
      console.log(row);
      console.log("录音");
      this.dialog6 = false;
      // window.workbench.downloadRecord(""+row.contactId+"", true);
    },
    //   监听操作
    handleListen(index, row) {
      this.dialog6 = true;
      this.row = row;
      this.name = row.trueName;
      this.page = 1;
      console.log(this.row);
      searchTime({
          pageSize: 15,
          page: this.page,
          mobile: this.row.phone,
          callTime: this.value888,
        })
        .then((res) => {
          console.log(res);
          this.listenlists = res.data.results;
          this.todelpage = res.data.count;
        });
    },
    //新增页面弹窗
    handleAdd() {
      this.dialogVisible = true;
      this.dialogStatus = 0;
      this.formData = {
        mobile: "",
        roleId: "",
        sex: "",
        userName: "",
        email: "",
        realName: "",
      };
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "page", 1);
      this.getData();
    },
    //重置密码
    resetPassword(index, row) {
      var _this = this;
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPassword({ userId: row.userId })
            .then((res) => {
              if (res.code != 200) {
                setTimeout(function () {
                  _this.$notify({
                    title: "错误",
                    message: "重置失败！",
                    type: "error",
                  });
                }, 0.1 * 1000);
              } else {
                setTimeout(function () {
                  _this.$notify({
                    title: "成功",
                    message: "重置成功！",
                    type: "success",
                  });
                }, 0.1 * 1000);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑页面弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    handleEdit(index, row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogStatus = 1;
      handleEdit({
            userId: row.userId,
        })
        .then((res) => {
          this.formData.mobile = res.data.sysAdminUser.mobile;
          this.formData.roleId = res.data.sysAdminUser.roleId;
          this.formData.sex = res.data.sysAdminUser.sex;
          this.formData.userName = res.data.sysAdminUser.userName;
          this.formData.email = res.data.sysAdminUser.email;
          this.formData.id = res.data.sysAdminUser.id;
          this.formData.realName = res.data.sysAdminUser.realName;
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
      /* this.formData.mobile = row.mobile; 
        this.formData.roleId = row.roleId;
        this.formData.sex = row.sex;
        this.formData.userName = row.userName;
        this.formData.email = row.email; 
        this.formData.id = row.id;  */
    },
    //获取数据
    getData() {
      getData(this.query)
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.tableData = res.data.results;
            this.pageTotal = res.data.count;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].userId + ",";
      }
      if (str.length == 0) {
        this.$message.error("必须选择一项！");
        return;
      }
      this.deleteData(str);
      this.multipleSelection = [];
    },
    // 删除操作
    handleDelete(index, row) {
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.deleteData(row.userId);
        })
        .catch(() => {});
    },
    deleteData(id) {
      deleteData({
            userIds: id,
        })
        .then((res) => {
          if (res.code == "200") {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "page", val);
      this.getData();
    },
  },
};
</script>
<style></style>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: green;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.green {
  color: green;
}
.search-box .el-input {
  width: 150px;
}
.audio {
  margin: 0 auto;
}
.blue {
  color: #409eff;
  cursor: pointer;
}
.schart-box {
  display: inline-block;
  margin: 20px;
}
.schart {
  width: 800px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 500;
  line-height: 50px;
  margin: 10px 0;
  font-size: 24px;
  color: #1f2f3d;
}
.vue-treeselect__control{
    height: 30px!important;
}
</style>

